<template>
  <div class="maintenance-container">
    <div class="content-wrapper">
      <div class="title">网站维护中</div>
      <div class="subtitle">{{ slogan }}</div>
    </div>
    <canvas ref="canvas" class="canvas-background"></canvas>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

const slogan = ref('系统维护中')
const canvas = ref<HTMLCanvasElement | null>(null)

// 字母和颜色配置
const letters = 'CodeForce CodeForce CodeForce CodeForce CodeForce'.split('')
const colors = ['#05FF00', '#00BFFF', '#FF4500', '#FFA500', '#C202C2']

let animationInterval: number
let ctx: CanvasRenderingContext2D | null = null
let drops: number[] = []
let fontSize = 10
let columns = 0
const colorIndex = Math.floor(Math.random() * colors.length)

// 加载标语
async function loadSlogan() {
  try {
    const response = await fetch('/text/slogans.json')
    const data = await response.json()
    const slogans = data.slogans || ['系统维护中']
    const randomIndex = Math.floor(Math.random() * slogans.length)
    slogan.value = slogans[randomIndex]
  } catch (error) {
    console.error('加载标语失败:', error)
  }
}

// 绘制Canvas动画
function draw() {
  if (!ctx || !canvas.value) return
  
  ctx.fillStyle = 'rgba(0, 0, 0, .1)'
  ctx.fillRect(0, 0, canvas.value.width, canvas.value.height)
  ctx.fillStyle = colors[colorIndex]
  
  for (let i = 0; i < drops.length; i++) {
    const text = letters[Math.floor(Math.random() * letters.length)]
    ctx.fillText(text, i * fontSize, drops[i] * fontSize)
    drops[i]++
    if (drops[i] * fontSize > canvas.value!.height && Math.random() > 0.95) {
      drops[i] = 0
    }
  }
}

// 初始化Canvas
function initCanvas() {
  if (!canvas.value) return
  
  canvas.value.width = window.innerWidth
  canvas.value.height = window.innerHeight
  ctx = canvas.value.getContext('2d')
  
  columns = Math.floor(canvas.value.width / fontSize)
  drops = Array(columns).fill(1)
  
  // 设置字体样式
  if (ctx) {
    ctx.font = `${fontSize}px monospace`
  }
  
  // 启动动画
  animationInterval = setInterval(draw, 60)
}

// 处理窗口大小变化
function handleResize() {
  if (canvas.value) {
    canvas.value.width = window.innerWidth
    canvas.value.height = window.innerHeight
    columns = Math.floor(canvas.value.width / fontSize)
    drops = Array(columns).fill(1)
  }
}

onMounted(() => {
  initCanvas()
  loadSlogan()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  clearInterval(animationInterval)
  window.removeEventListener('resize', handleResize)
})
</script>

<style scoped>
.maintenance-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.canvas-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: -1;
}

.content-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: baseline;
  gap: 32px;
  margin-left: 20%;
  margin-top: 15%;
  position: relative;
  z-index: 1;
}

.title {
  color: #F5F5F5;
  text-align: center;
  font-size: 48px;
  font-style: normal;
  font-weight: 600;
}

.subtitle {
  color: rgba(255, 255, 255, 0.60);
  font-size: 20px;
  font-style: normal;
  font-weight: 300;
  line-height: 28px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .title {
    font-size: 26px;
  }
  
  .subtitle {
    font-size: 14px;
  }
}
</style>

<style>
/* 全局样式确保页面无滚动条 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>